<template>
    <div class="box">
        <header class="header">我的</header>
        <main class="content">

            <div class="user">
                <p> 用户名：{{ username }}</p>
                <van-button type="default" size="small" @click="loginout">退出登录</van-button>


            </div>

            <!-- <div>{{ store.myorderList }}</div> -->
            <van-grid>
                <van-grid-item
                    icon="https://img12.360buyimg.com/img/s60x60_jfs/t1/144453/3/26543/2290/62651dc1E9a870916/9d55698157214416.png"
                    text="待付款" @click="$router.push({ path: '/myorder', query: { status: 1 } })" />
                <van-grid-item :icon="require('@/assets/daifahuo.png')" text="待发货"
                    @click="$router.push({ path: '/myorder', query: { status: 2 } })" />
                <van-grid-item
                    icon="https://img12.360buyimg.com/img/s60x60_jfs/t1/192293/7/23240/3633/62651dc1E8c8c7f45/1dbd5c48a5537c8a.png"
                    text="退款/售后" @click="$router.push({ path: '/myorder', query: { status: 3 } })" />
                <van-grid-item
                    icon="https://img12.360buyimg.com/img/s60x60_jfs/t1/73197/18/17564/2229/62651dc1E9eb02b59/421fc756bd04de78.png"
                    text="全部订单" @click="$router.push({ path: '/myorder', query: { status: 0 } })" />
            </van-grid>

        </main>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { showSuccessToast } from 'vant';
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
const router = useRouter()
const username = localStorage.getItem('username')
const loginout = () => {
    // 提示退出登录成功
    showSuccessToast('用户退出登录');
    // 清除token
    localStorage.removeItem('token')
    // 清除用户名
    localStorage.removeItem('username')
    // 跳转到登录页面
    router.push('/login')
}
</script>
<style lang="scss" scoped>
.user {
    display: flex;
    justify-content: space-between;
}
</style>